<template>
	<view>
		<nav-custom></nav-custom>
		<view class="flex flex-wrap padding-sm justify-between">
			<good-item v-for="(item,index) in glist" :key="item.objectId" :getdata="item"></good-item>
		</view>
		<view class="back-top" v-if="isShow" @click="gotop">
			<text class="iconfont icon-tubiao_fanhuidingbu"></text>
		</view>
		<view class="fixed flex justify-center bg-fff">
			<view v-for="(item,index) in tabArr" :key="index" @click="dochg(item)" class="flex justify-around align-center">
				<view class="">{{item.name}}</view>
				<u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="39rpx"></u-line>
			</view>
		</view>
		<view class="text-center">{{ynbotm}}</view>
		<u-popup :show="popshow" mode="left"  @close="popshow=false">
			<view class="pop-cont">
				<view v-for="(item,index) in grodata" :key="item.bid" class="padding-sm u-border-bottom">
					{{item.bname}}
					<view class="cu-tag round bg-yellow color-fff margin-left-xs">
						{{item.num}}
					</view>
					<view v-if="index==0">
						<view 
							@click="listShow=!listShow;sceneShow=false" 
							class="padding-tb-sm u-border-top margin-top"
							:class="{'u-border-bottom':!listShow}"
						>
							口味筛选
						</view>
						<u-cell-group v-if="listShow">
							<u-cell v-for="(itm,idx) in item.list" :key="itm.tid" :title="itm.tname" isLink @click="chglist(itm.tid,'fid')"></u-cell>
						</u-cell-group>
						<view @click="sceneShow=!sceneShow;listShow=false" class="padding-tb-sm">
							场景筛选
						</view>
						<u-cell-group v-if="sceneShow">
							<u-cell v-for="(itm,idx) in item.scene" :key="itm.tid" :title="itm.tname" isLink @click="chglist(itm.tid,'sid')"></u-cell>
						</u-cell-group>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fend:false,
				fpage:0,
				ynbotm:"上拉显示更多...",
				glist:[],
				isShow:false,
				bcid:1,
				tabArr:[
					{name:'分类',bcid:'100',target:''},
					{name:'蛋糕',bcid:'1',target:'/pages/cake'},
					{name:'面包',bcid:'11',target:'/pages/bread'},
					{name:'小食',bcid:'6',target:'/pages/food'},
					{name:'购物车',bcid:'101',target:'/pages/cart'},
				],
				listShow:false,
				sceneShow:false,
				popshow:false,
				grodata:[]
			}
		},
		computed:{
			num() {
				return this.$store.state.count.num
			},
			// xiaolu里和官方文档，有其它写法
			wheres(){
				return JSON.stringify(this.$store.state.wheres)
			}
		},
		onLoad() {
			// console.log(JSON.stringify(this.wheres));
			this.loaddata();
		},
		onPullDownRefresh() {
			this.chgid()
		},
		// 触底事件
		onReachBottom() {
			console.log("cake页面触底");
			this.loaddata()
		},
		// 实时监听页面滚动位置，影响性能，说是用WXS来处理比较好
		onPageScroll(e) {
			this.isShow = e.scrollTop>200
		},
		methods: {
			// 从后端请求数据
			loaddata(){
				// this.ynbotm = true;
				if (this.fend) {
					uni.showToast({
						title:"到底了，不能再拖了",
						icon:"none"
					});
					return;
				}
				// console.log(this.fpage);
				
				// let gurl = `/1.1/classes/list?where={"bcid":${this.bcid}}&limit=6&skip=${this.fpage*6}`;
				let gurl = `/1.1/classes/list?where=${this.wheres}&limit=6&skip=${this.fpage*6}`;
				// 放请求成功后执行，会有什么问题？
				// this.fpage++;
				console.log(gurl);
				this.$get(gurl).then(res=>{
					uni.stopPullDownRefresh();
					// console.log(1,res);
					this.glist = [...this.glist,...res.results];
					this.fpage++;
					if (res.results.length<6) {
						this.fend = true;
						this.ynbotm = "---暂时没数据了---"
						return;
					}
				}).catch((e)=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 回到顶部，比index页用组件来实现效率高一些
			gotop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:100  // 所用时长ms
				})
			},
			// 名字是之前起的，后面适用范围大了，不适合了。是清空之前的条件，新条件重新查
			// 多次请求数据有问题，应该把数据直接放VUEX里，不用存文件，然后反复查本地就可以了
			chgid(tmpwh=JSON.parse(this.wheres)){
				this.fpage = 0;
				this.ynbotm = "上拉显示更多...";
				this.fend = false;
				this.glist = [];
				// this.bcid = bcid; 换用状态机
				
				// 用dispatch直接调用actions中的方法，上下文是指调用处的环境？
				// this.$store.dispatch('user/userLoginAct',this.info)
				// 直接调用maution中的方法，等同于actions？与xiaolu里写法不同
				this.$store.commit('chgwh',tmpwh);
				this.loaddata();
			},
			// 底部菜单事件方法
			dochg(val){
				if (val.bcid == '100') {
					this.$get("/1.1/classes/group").then(res=>{
						this.grodata = res.results;
						this.popshow = true;
					})
					
				}else if(val.bcid == '101'){
					uni.navigateTo({
						url:"./cart"
					})
				}else if (val.bcid) {
					this.chgid({bcid:Number(val.bcid)})
				};
				
			},
			// 分类-》左侧菜单事件方法
			chglist(tid,txt){
				// console.log(tid);
				this.popshow = false;
				// let txt = 'fid'; []可以把变量内容呈现为新变量名
				let tmpwh = {bcid:1,[txt]:tid};
				this.chgid(tmpwh);
			}
		}
	}
</script>

<style scoped>
	page{
		padding: 80rpx 0 120rpx 0;
	}
	.back-top{
		height: 100upx;
		width: 100upx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 30upx 4upx rgba(0,0,0,0.4);
		position: fixed;
		bottom: 129upx;
		right: 20upx;
		text-align: center;
		line-height: 100upx;
	}
	.cake-item{
		width: 350upx;
	}
	.fs-28{
		margin-top: 24upx;
	}
	.fs-16{
		margin: 14upx 0;
	}
	.fs-18{
		margin-bottom: 22upx;
	}
	.poster{
		height: 350upx;
		background-color: #f5f5f5;
	}
	.fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		background-color: #fff; /* 没这为什么会透明？ */
	}
	.pop-cont{
		width: 400upx;
		margin-top: 200upx;
	}
</style>
